<template>
  <div>
    <en-table-layout
      toolbar
      pagination
      :loading="loading"
      :tableData="tableData"
    >
      <template slot="table-columns">
        <el-table-column prop="purchase_order_title" label="采购单信息"/>
        <el-table-column prop="quotation_title" label="我的报价单"/>
        <!--报价时间-->
        <el-table-column label="报价时间">
          <template slot-scope="scope">{{ scope.row.create_time | unixToDate }}</template>
        </el-table-column>
        <!--状态-->
        <el-table-column prop="refund_status_text" label="报价单状态">
          <div slot-scope="{row}">
            {{ row.status === 0 ? '开启' : '关闭' }}
          </div>
        </el-table-column>
        <!--操作-->
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleToDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </template>
      <!--分页-->
      <el-pagination
        slot="pagination"
        v-if="pageData"
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
        :current-page="pageData.page_no"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageData.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.data_total">
      </el-pagination>
    </en-table-layout>
  </div>
</template>

<script>
import * as API_Purchase from '@/api/purchase'
export default {
  name: 'quotationsList',
  data() {
    return {
      /** 列表loading状态 */
      loading: false,

      /** 列表参数 */
      params: {
        page_no: 1,
        page_size: 10
      },

      /** 列表数据 */
      tableData: [],

      /** 列表分页数据 */
      pageData: {}
    }
  },
  mounted() {
    this.GET_Quotations()
  },
  methods: {
    /** 分页大小发生改变 */
    handlePageSizeChange(size) {
      this.params.page_size = size
      this.GET_Quotations()
    },

    /** 分页页数发生改变 */
    handlePageCurrentChange(page) {
      this.params.page_no = page
      this.GET_Quotations()
    },

    /** 去报价单相亲 */
    handleToDetail(row) {
      this.$router.push({
        name: 'quotationsDetail',
        query: {
          quotation_id: row.quotation_id,
          purchase_id: row.purchase_id
        }
      })
    },

    /** 获取售后服务列表数据 */
    async GET_Quotations() {
      this.loading = true
      const res = await API_Purchase.getQuotations(this.params)
      this.loading = false
      this.tableData = res.data
      this.pageData = {
        page_no: res.page_no,
        page_size: res.page_size,
        data_total: res.data_total
      }
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>

</style>